<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-'>/**
</span> * @ignore
 * pull-to-refresh plugin for KISSY scroll-view
 * @author yiminghe@gmail.com
 */
KISSY.add('scroll-view/plugin/pull-to-refresh', function (S, Base) {
    var substitute = S.substitute;

    var transformProperty = S.Features.getTransformProperty();

<span id='KISSY-ScrollView-Plugin-PullToRefresh'>    /**
</span>     * pull to refresh plugin for ScrollView
     * @class KISSY.ScrollView.Plugin.PullToRefresh
     * @extend KISSY.Base
     */
    return Base.extend({
        pluginId: this.getName(),

        _onSetState: function (e) {
            if (!this.scrollView) {
                return;
            }
            var status = e.newVal,
                self = this,
                prefixCls = self.scrollView.get('prefixCls'),
                $el = self.$el;
            $el.attr('class', prefixCls +
                'scroll-view-pull-to-refresh ' +
                prefixCls + 'scroll-view-' + status);
            self.labelEl.html(self.get(status + 'Html'));
            self.elHeight = $el.height();
        },

        _onScrollMove: function () {
            var self = this,
                b = self.scrollView.get('scrollTop');
            if (-b &gt; self.elHeight) {
                self.set('state', 'releasing');
            } else if (b &lt; 0) {
                self.set('state', 'pulling');
            }
        },

        _onDragEnd: function () {
            var self = this;
            var scrollView = self.scrollView;
            var b = scrollView.get('scrollTop');
            if (-b &gt; self.elHeight) {
                scrollView.minScroll.top = -self.elHeight;
                var loadFn = self.get('loadFn');
                self.set('state', 'loading');
                function callback() {
                    // will animate to restore
                    scrollView.scrollTo({
                        top: -self.elHeight
                    });
                    scrollView.scrollTo({
                        top: scrollView.minScroll.top
                    }, {
                        duration: scrollView.get('snapDuration'),
                        easing: scrollView.get('snapEasing')
                    });
                    self.set('state', 'pulling');
                }

                if (loadFn) {
                    loadFn.call(self, callback);
                } else {
                    callback.call(self);
                }
            }
        },

        _onSetScrollTop: function (v) {
            v = v.newVal;
            if (v &lt; 0) {
                this.el.style[transformProperty] = 'translate3d(0,' + -v + 'px,0)';
            }
        },

        pluginRenderUI: function (scrollView) {
            var self = this;
            self.scrollView = scrollView;
            var prefixCls = scrollView.get('prefixCls');
            var el = S.all(substitute('&lt;div class=&quot;{prefixCls}scroll-view-pull-to-refresh&quot;&gt;' +
                '&lt;div class=&quot;{prefixCls}scroll-view-pull-to-refresh-content&quot;&gt;' +
                '&lt;span class=&quot;{prefixCls}scroll-view-pull-icon&quot;&gt;&lt;/span&gt;' +
                '&lt;span class=&quot;{prefixCls}scroll-view-pull-label&quot;&gt;&lt;/span&gt;' +
                '&lt;/div&gt;' +
                '&lt;/div&gt;', {
                prefixCls: prefixCls
            }));
            self.labelEl = el.one('.' + prefixCls + 'scroll-view-pull-label');
            scrollView.get('el').prepend(el);
            self.$el = el;
            self.el = el[0];
            self._onSetState({
                newValue: 'pulling'
            });
        },

        pluginBindUI: function (scrollView) {
            var self = this;
            scrollView.on('scrollMove', self._onScrollMove, self);
            scrollView.on('dragend', self._onDragEnd, self);
            self.on('afterStateChange', self._onSetState, self);
            scrollView.on('afterScrollTopChange', self._onSetScrollTop, self);
        },

        pluginDestructor: function () {
            this.$el.remove();
        }
    }, {
        ATTRS: {
<span id='KISSY-ScrollView-Plugin-PullToRefresh-cfg-pullingHtml'>            /**
</span>             * pulling hint html.
             * Defaults to: Pull down to refresh...
             * @cfg {String} pullingHtml
             */
<span id='global-property-pullingHtml'>            /**
</span>             * @ignore
             */
            pullingHtml: {
                value: 'Pull down to refresh...'
            },
<span id='KISSY-ScrollView-Plugin-PullToRefresh-cfg-releasingHtml'>            /**
</span>             * releasing hint html.
             * Defaults to: release to refresh...
             * @cfg {String} releasingHtml
             */
<span id='global-property-releasingHtml'>            /**
</span>             * @ignore
             */
            releasingHtml: {
                value: 'release to refresh...'
            },
<span id='KISSY-ScrollView-Plugin-PullToRefresh-cfg-loadingHtml'>            /**
</span>             * loading hint html.
             * Defaults to: loading...
             * @cfg {String} loadingHtml
             */
<span id='global-property-loadingHtml'>            /**
</span>             * @ignore
             */
            loadingHtml: {
                value: 'loading...'
            },
<span id='KISSY-ScrollView-Plugin-PullToRefresh-cfg-loadFn'>            /**
</span>             * load function to load data asynchronously
             * @cfg {Function} loadFn
             */
<span id='global-property-loadFn'>            /**
</span>             * @ignore
             */
            loadFn: {
            },
            state: {
                value: 'pulling'
            }
        }
    });
}, {
    requires: ['base']
});</pre>
</body>
</html>
